<!--
- Author:  LiShibin.
- Date:    2018/1/4 0004.
- File:    积分的商品分类页.
-->
<template>
  <div>
    <div class="Web_Box" style="">
      <mt-swipe :auto="4000" class="banner swiper-container" style="height: 8rem">
        <mt-swipe-item class="swiper-slide" v-for="(item,index) in bannerList" :key="index">
          <div class="swiper-slide" @click="gotoUrl(item.adv_pic_url)">
            <img :src="$config.imgsite + $config.adImgSrc + item.adv_pic + '_w640h320'" alt=""/>
          </div>
        </mt-swipe-item>
      </mt-swipe>
      <div class="integrat_top">
        <ul class="f-cb">
          <li class="bor-r-eee">积分 <span class="cr_3ebb6e">{{integralNum}} </span></li>
          <li><a @click="gotoExchangedList">兑换记录
            <span class="num" v-show="noticeCount != 0">{{noticeCount | noticeMaxLimit}}</span>
          </a></li>
        </ul>
      </div>
      <div class="screen_box" style="margin-bottom: 10px;">
        <ul class="screen_left f-cb" style="width: 13rem">
          <li @click="orderByDefaul" style="width: 25%">综合排序</li>
          <li @click="gotoClassify" class="on" style="width: 25%">分类</li>
          <li @click="orderByPrice" style="width: 25%">价格</li>
          <li @click="orderBySale" style="width: 25%">销量</li>
        </ul>
        <div class="screen" style="width: 3rem" @click="switchTagModalShow(true)">
          <i class="iconfont icon-shaixuan"></i><span>筛选</span>
        </div>
        <!--<div class="screen" style="width: 3rem" @click="switchClassifyModalShow(true)"><i class="iconfont icon-baike"></i><span>分类</span>-->
        <!--</div>-->
      </div>
      <!--分类-->
      <div class="index_diary" v-for="classify in classifyGoodsList" v-if="classify.goods_list && classify.goods_list.length > 0">
        <div class="act_tit f-cb">
          <span>{{classify.stc_name}} ({{getClassifyCount(classify.stc_id)}})</span><a href="javascript:void(0)" class="act_more" @click="gotoIntegralMall(classify.stc_id)">更多<i class="iconfont icon-more"></i></a>
        </div>
        <div class="bg_fff pt20 mt20">
          <div class="CommodityClassification">
            <div class="con">
              <ul>
                <li v-for="goods in classify.goods_list" @click="gotoGoodsDetail(goods.goods_commonid)">
                  <div class="pic">
                    <img :src="$config.imgsite + $config.goodsImgSrc + $config.storeId + '/' + goods.goods_image + '_w200'" alt="" alt=""/>
                  </div>
                  <h3 class="slh2">{{goods.goods_name}}</h3>
                  <p class="Price"><span class="pl5">{{parseInt(goods.goods_price)}}</span><span class="inte">积分</span></p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <footer-tab></footer-tab>
    </div>
    <!--分类-->
    <transition name="slide-fade">
      <div class="screenblock" v-show="ClassifyModalShow">
        <!--买花分类-->
        <div v-if="goodsClassifyList">
          <div v-for="classify in goodsClassifyList.integral">
            <div class="s_title">
              <i class="iconfont icon-shuxian"></i><span :class="{'tag-on': classifySelected == classify.stc_id}" @click="switchSelectClassify(classify.stc_id)">{{classify.stc_name}}</span>
            </div>
            <div class="screen_b">
              <ul class="f-cb">
                <li v-for="classifySon in classify.son" :class="{'tag-on': classifySelected == classifySon.stc_id}" @click="switchSelectClassify(classifySon.stc_id)">{{classifySon.stc_name}}</li>
              </ul>
            </div>
          </div>
          <div style="margin: 0 auto; width: 100%; margin-top: 5rem; text-align: center" v-if="goodsClassifyList.buy.length == 0">
            当前没有分类~
          </div>
        </div>
        <div class="screenblock_btn">
          <a href="javascript:void(0)" class="bg_221814" @click="cancleSelectClassify">取消</a><a href="javascript:void(0)" class=" bg_3dbb6e" @click="confirmSelectClassify">确定</a>
        </div>
      </div>
    </transition>
    <!--分类 end-->
    <!--筛选-->
    <transition name="slide-fade">
      <div class="screenblock" v-show="tagModalShow">
        <h1 style="text-align: center; background: #7dd594; font-size: 17px; line-height: 35px; font-weight: bolder; color: #fff">分类</h1>
        <!--买花分类-->
        <div v-if="goodsClassifyList">
          <div v-for="classify in goodsClassifyList.integral">
            <div class="s_title">
              <i class="iconfont icon-shuxian"></i><span :class="{'tag-on': classifySelected == classify.stc_id}" @click="switchSelectClassify(classify.stc_id)">{{classify.stc_name}}</span>
            </div>
            <div class="screen_b">
              <ul class="f-cb">
                <li v-for="classifySon in classify.son" :class="{'tag-on': classifySelected == classifySon.stc_id}" @click="switchSelectClassify(classifySon.stc_id)">{{classifySon.stc_name}}</li>
              </ul>
            </div>
          </div>
          <div style="margin: 0 auto; width: 100%; margin-top: 5rem; text-align: center" v-if="goodsClassifyList.buy.length == 0">
            当前没有分类~
          </div>
        </div>
        <h1 style="text-align: center; background: #7dd594; font-size: 17px; line-height: 35px; font-weight: bolder; color: #fff">筛选</h1>
        <div v-for="tagGroup in tagList">
          <div class="s_title"><i class="iconfont icon-shuxian"></i><span>{{tagGroup.tag_typename}}</span></div>
          <div class="screen_b">
            <ul class="f-cb">
              <li v-for="tag in tagGroup.data" :class="{'tag-on': tagIsSelected(tag.tag_id)}" @click="switchSelectTag(tag.tag_id)">{{tag.tag_name}}</li>
            </ul>
          </div>
        </div>
        <div class="screenblock_btn">
          <a href="javascript:void(0)" class="bg_221814" @click="cancleSelectTag">取消</a><a href="javascript:void(0)" class=" bg_3dbb6e" @click="confirmSelectTag">确定</a>
        </div>
      </div>
    </transition>
    <!--筛选 end-->
  </div>
</template>

<script>
  import {Swipe, SwipeItem} from 'mint-ui'
  import {mapModules, mapRules} from 'vuet'

  export default{
    mixins: [
      mapModules({goodsClassifyList: 'goodsClassifyList', tagList: 'tagList'}),
      mapRules({once: ['goodsClassifyList', 'tagList']})
    ],
    data() {
      return {
        bannerList: [],
        integralNum: '',
        countList: {payed_order: 0, ship_order: 0, unpay_order: 0, eval_order: 0},
        tagSelectedList: this.$route.query.tags ? this.$route.query.tags.split(',') : [], // 筛选
        classifySelected: this.$route.query.classify || null, // 分类
        tagModalShow: false, // 是否弹出筛选页面
        ClassifyModalShow: false, // 是否弹出分类页
        classifyGoodsList: {requested: false, loading: false, data: []},
        classiListCount: []
      }
    },
    components: {
      'mtSwipe': Swipe,
      'mtSwipeItem': SwipeItem
    },
    created() {
      this.getClassifyListCount()
      this.getBannerList()
      this.getIntegralNum()
      this.getCountList()
      this.getClassifyGoods()
    },
    mounted() {
      this.$native.weixinShare(window.location.href, '积分商城', null, '遇花园')
    },
    watch: {},
    computed: {
      // 提醒数
      noticeCount () {
        return parseInt(this.countList.payed_order) + parseInt(this.countList.unpay_order) + parseInt(this.countList.ship_order)
      }
    },
    methods: {
      getClassifyListCount() {
        this.$request.getClassifyGoodsCount(this.$dictionary.buyType.integral, this.$config.storeId).then(data => {
          this.classiListCount = data
        })
      },
      getClassifyCount(id) {
        let count = 0
        for (let i = 0; i < this.classiListCount.length; i++) {
          if (this.classiListCount[i].stc_id == id) {
            count = this.classiListCount[i].count
            break
          }
        }
        return count
      },
      gotoClassify() {
        this.$router.push({name: 'classify-integral'})
      },
      switchTagModalShow(boolValue) {
        if (boolValue) {
          this.$utils.addBodyFix() // 显示模态框，防止滚动模态框里的div时body也滚动
        } else {
          this.$utils.removeBodyFix()
        }
        this.tagModalShow = boolValue
      },
      switchClassifyModalShow(boolValue) {
        if (boolValue) {
          this.$utils.addBodyFix() // 显示模态框，防止滚动模态框里的div时body也滚动
        } else {
          this.$utils.removeBodyFix()
        }
        this.ClassifyModalShow = boolValue
      },
      cancleSelectClassify() {
        this.classifySelected = null
        this.switchClassifyModalShow(false)
      },
      confirmSelectClassify() {
        this.switchClassifyModalShow(false)
        this.$router.push({name: 'integral-mall', query: {storeId: this.storeId, classify: this.classifySelected}})
      },
      switchSelectClassify(classifyId) {
        if (this.classifySelected == classifyId) {
          this.classifySelected = null
        } else {
          this.classifySelected = classifyId
        }
      },
      cancleSelectTag() {
        this.classifySelected = null
        this.tagSelectedList = []
        this.switchTagModalShow(false)
      },
      confirmSelectTag() {
        this.switchTagModalShow(false)
        this.$router.push({name: 'integral-mall', query: {storeId: this.storeId, classify: this.classifySelected, tags: this.tagSelectedList.join(',')}})
      },
      switchSelectTag(tagId) {
        let index = this.tagSelectedList.indexOf(tagId)
        if (index == -1) {
          this.tagSelectedList.push(tagId)
        } else {
          this.tagSelectedList.splice(index, 1)
        }
      },
      tagIsSelected(tagId) {
        if (this.tagSelectedList.indexOf(tagId) != -1) {
          return true
        } else {
          return false
        }
      },
      orderByDefaul() {
        this.$router.push({
          name: 'integral-mall',
          query: {storeId: this.storeId}
        })
      },
      orderByPrice() {
        this.$router.push({
          name: 'integral-mall',
          query: {storeId: this.storeId, priceOrder: 1}
        })
      },
      orderBySale() {
        this.$router.push({
          name: 'integral-mall',
          query: {storeId: this.storeId, saleOrder: 1}
        })
      },
      gotoIntegralMall(classifyId) {
        this.$router.push({name: 'integral-mall', query: {classify: classifyId}})
      },
      getCountList() {
        this.$request.getCountList('4').then(data => {
          this.countList = data
        })
      },
      gotoExchangedList() {
        this.$router.push({name: 'integral-exchanged'})
      },
      getIntegralNum() {
        this.$request.getIntegralNum().then(data => {
          this.integralNum = data
        })
      },
      getBannerList() {
        this.$request.getIntagralMallBannerList().then(data => {
          this.bannerList = data
        })
      },
      getClassifyGoods() {
        this.classifyGoodsList.loading = true
        this.$request.getClassifyGoods(this.$dictionary.buyType.integral, this.$config.storeId).then(data => {
          this.classifyGoodsList = data
        }).finally(() => {
          this.classifyGoodsList.requested = true
          this.classifyGoodsList.loading = false
        })
      },
      gotoHome() {
//        this.$router.push({name: 'home', query: {storeId: this.storeId}})
        window.location.href = 'http://' + window.location.host + '/wap/?storeId=' + this.storeId // ios微信分享要如此跳转后才能正确分享
      },
      gotoWikiList() {
        this.$router.push({name: 'wiki-list', query: {action: 'view'}})
      },
      gotoGoodsDetail(goodsCommonid) {
//        this.$router.push({
//          name: 'goods-detail',
//          params: {id: goodsCommonid},
//          query: {storeId: this.$config.storeId, buyType: this.$dictionary.buyType.integral}
//        })
        window.location.href = 'http://' + window.location.host + '/wap/goods/detail/' + goodsCommonid + '?storeId=' + this.storeId + '&buyType=' + this.$dictionary.buyType.integral // ios微信分享要如此跳转后才能正确分享
      },
      gotoDiaryList() {
        this.$router.push({name: 'diary-list'})
      },
      gotoArticleList() {
        this.$router.push({name: 'article-list', qeury: {type: this.$dictionary.articleType.special}})
      },
      gotoGarden() {
        this.$router.push({name: 'garden-list'})
      }
    }
  }
</script>

<style>
  .slide-fade-enter-active {
    transition: all .3s ease;
  }

  .slide-fade-leave-active {
    transition: all .3s ease;
    /*transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);*/
  }

  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */
  {
    transform: translateX(10px);
    opacity: 0;
  }

  .tag-on {
    background-color: #3dbb6e !important;
    color: #fff !important;
  }
</style>
